import React from 'react'

import './index.scss'
// 引入head组件
import Head from 'next/head'
import PropTypes from 'prop-types';
// 顶部导航
import TopNavigation from '../../../components/topNavigation'
// 右侧导航
import Navigation from '../../../components/navigation'

import { withRouter } from 'next/router'

import {getHeadAndTailData, getNewsDetails} from '../../../api/api'
// 底部组件引入
import Footer from "../../../components/footer";
// redux 数据
import store from '../../../store'

class NewsDetails extends React.Component{
    constructor(props) {
        super(props);
        console.log(props)
        let {remUrl} =  store.getState()
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            remUrl,
            navFrag: true
        }
    }
    static async getInitialProps(state){
        // 新闻详情
        const newsDetails = await getNewsDetails(state.query.id)
        // 底部数据
        let footerData = await getHeadAndTailData()
        return{
            newsDetails: newsDetails.data,
            footerData: footerData.data,
        }
    }

    render() {
        return(
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.journalism_details_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.journalism_details_keywords} />
                    <meta name="description" content={this.props.footerData.info.journalism_details_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>
                </Head>
                <div className='news_details' onClick={this.downDisplayNav.bind(this)}>
                    <TopNavigation title={'newsDetails'} changeDisplayNav={this.changeDisplayNav.bind(this)}/>
                    {/*右侧导航*/}
                    <Navigation navFrag={this.state.navFrag} displayNav={this.state.displayNav}/>
                    {/*详情*/}
                    {
                        this.props.newsDetails.info
                        &&
                        (<div className='news_details_con'>
                            <h1 className='news_details_con_tit'>{this.props.newsDetails.info.title}</h1>
                            <div className='details_con_time'>
                                <span>作者：{this.props.newsDetails.info.auth}</span>
                                <span>{this.props.newsDetails.info.create_time}</span>
                            </div>
                            <div className='details_con_info' dangerouslySetInnerHTML={{__html: this.props.newsDetails.info.content}}>
                            </div>
                        </div>)
                    }
                </div>
                {/*底部*/}
                <Footer footerData={this.props.footerData} />
            </>

        )
    }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
}
NewsDetails.propTypes  = {
    footerData: PropTypes.object,
    newsDetails: PropTypes.object
}

export default withRouter(NewsDetails)